/**
 * 限重设置与重车下调重量显示
 */
import { Button, Form, Input, message, Modal } from "antd"
import { ItemBox } from "../../style"
import { useCallback, useEffect, useState } from "react"
import { getGbSystemSetSystemDetail, ISystemSetSystemType, postGbSystemSetSystemSet } from "../../api"
import { useWindowFontSize } from "../../../../../assets/fun/Antd/configprovider"

const WeightSet = ()=>{

    const [weightData,setWeightData] = useState<ISystemSetSystemType>()
    const [oneShow,setOneShow] = useState(false)
    const [twoShow,setTwoShow] = useState(false)
    const [form] = Form.useForm();
    const [formnd] = Form.useForm();
    const listFun = useCallback(async ()=>{
        // 数据获取
        //getGbSystemSetSystemDetail
        const { code, msg, data } = (await getGbSystemSetSystemDetail()) as {
            code: number;
            msg: string;
            data: ISystemSetSystemType;
          };
          if (code === 20000) {
            setWeightData(data)
          } else {
            message.error(msg);
          }
    },[])

    useEffect(()=>{
        listFun()
    },[listFun])
    
    //限重设置的确定回调
    const handleOk = async () => {
        const values = await form.validateFields()
        const params = {
            ...values,
            id: weightData?.id,
        }
        const { code, msg } = (await postGbSystemSetSystemSet(params)) as {
            code: number
            msg: string
        }
        if (code === 20000) {
            message.success("设置成功")
            setOneShow(false)
            listFun()
        } else {
            message.error(msg)
        }
    }
    //限重设置的取消回调
    const handleCancel = () => {
        setOneShow(false)
    }

    const handleOknd = async () => {
        const values = await formnd.validateFields()
        const params = {
            ...values,
            id: weightData?.id,
        }
        const { code, msg } = (await postGbSystemSetSystemSet(params)) as {
            code: number
            msg: string
        }
        if (code === 20000) {
            message.success("设置成功")
            setTwoShow(false)
            listFun()
        } else {
            message.error(msg)
        }
    }
    const handleCancelnd = () => {
        setTwoShow(false)
    }

    return(
        <>
            <div style={{display:'flex',justifyContent:'space-between'}}>
            <ItemBox style={{ marginBottom: '2rem' }}>
                <div className="item-title">
                    <div>限重设置</div>
                    <Button type="link" onClick={() => {
                        setOneShow(true)
                        form.setFieldsValue({
                            weightLimit: weightData?.weightLimit,
                        })
                    }}>设置参数</Button>
                </div>
                <div className="item-main">
                    <span className="label">限重(吨)</span>
                    <span>{weightData?.weightLimit}</span>
                </div>
            </ItemBox>
            <ItemBox style={{ marginBottom: '2rem' }}>
                <div className="item-title">
                    <div>重车下调重量显示</div>
                    <Button type="link" onClick={() => {
                        setTwoShow(true)
                        formnd.setFieldsValue({
                            weightDisplay: weightData?.weightDisplay,
                        })
                    }}>设置参数</Button>
                </div>
                <div className="item-main">
                    <span className="label">显示下调重量(吨)</span>
                    <span>{weightData?.weightDisplay}</span>
                </div>
            </ItemBox>
            </div>
            <Modal
                width={useWindowFontSize(450)}
                title={"设置参数"}
                open={oneShow}
                onOk={handleOk}
                onCancel={handleCancel}
                getContainer={false}
            >
                <Form form={form}
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    labelAlign="left"
                >
                    <Form.Item
                        label="限重(吨)"
                        name="weightLimit"
                        rules={[{ required: true, message: "请填写装车限重!" },
                            ({ getFieldValue }) => ({
                                validator(_, value) {
                                    if (value < 0 || value > 99999999) {
                                        return Promise.reject("限重不合适，请重新输入");
                                    }
                                    return Promise.resolve();
                                },
                            }),
                        ]}
                    >
                        <Input
                            type="number"
                            maxLength={8}
                            placeholder="请填写装车限重"
                        />
                    </Form.Item>
                </Form>
            </Modal>
            <Modal
                width={useWindowFontSize(450)}
                title={"设置参数"}
                open={twoShow}
                onOk={handleOknd}
                onCancel={handleCancelnd}
                getContainer={false}
            >
                <Form form={formnd}
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    labelAlign="left"
                >
                    <Form.Item
                        label="显示下调(吨)"
                        name="weightDisplay"
                        rules={[{ required: true, message: "请填写显示下调吨数!" },
                            //最大长度不能超过8位
                            ({ getFieldValue }) => ({
                                validator(_, value) {
                                    if (value < 0 || value > 99999999) {
                                        return Promise.reject("限重不合适，请重新输入");
                                    }
                                    return Promise.resolve();
                                },
                            }),
                        ]}
                    >
                        <Input
                            type="number"
                            maxLength={8}
                            placeholder="请填写显示下调吨数"
                        />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}
export default WeightSet